<template>
  <div class="main">
    <el-space wrap :size="30">
      <el-card style="width: 400px; height: 400px; background: #bdd2f5">
        <echarts-top :data="Data1" />
      </el-card>
      <el-card style="width: 1000px; height: 400px; background: #88b7d6">
        <echarts-right :data="Data2" />
      </el-card>
      <el-card style="width: 1430px; height: 350px; background: #072685">
        <ecahrts-bottom :data="Data" />
      </el-card>
    </el-space>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue";
import axios from "@/utils/axios";
import ecahrtsBottom from "./echarts_views/home_echarts.vue";
import echartsTop from "./echarts_views/home_echarts1.vue";
import echartsRight from "./echarts_views/home_echartsC.vue";
export default {
  name: "index",
  components: {
    ecahrtsBottom,
    echartsTop,
    echartsRight,
  },
  setup() {
    const state = reactive({
      Data: [],
      Data1: [],
      Data2: [],
    });
    onMounted(() => {
      getData();
    });
    const getData = () => {
      let httpOption = axios.post;
      httpOption("/api/admin/datas").then((res) => {
        state.Data = res.pass;
        state.Data1 = res.stars;
      });
    };
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
.main {
  margin-left: 10px;
}
</style>